<template>
  <el-menu
      :style="{width: isCollapsed ? '60px':'200px'}"
      active-text-color="#409eff"
      background-color="#a8e9fd"
      class="side"
      :collapse="isCollapsed"
      :default-active="active"
      text-color="#000"
      @close="handleClose"
      @open="handleOpen"
  >
    <p class="logo-lg">{{isCollapsed?'陪诊':'陪诊系统'}}</p>
<!--    利用props在父子组件间传递数据-->
    <TreeMenu :index="1" :menuData="menuData"/>
  </el-menu>
</template>

<script setup>
import {ref,reactive,computed} from "vue";
import TreeMenu from "./TreeMenu.vue";
import {useRouter} from "vue-router";
import {useMenuStore} from "../stores/menu.js";

const router = useRouter();

const menuStore=useMenuStore()
const menuData=computed(() => menuStore.routerList)
const active=computed(() => menuStore.menuActive)
const isCollapsed=computed(() => menuStore.isCollapsed)




const handleOpen = (key, keyPath) => {
}
const handleClose = (key, keyPath) => {
}
</script>


<style lang="less" scoped>
.aside{
  height: 100vh;
  .logo-lg{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: white;

  }
}

</style>

